import axios from 'axios'
import React, { useState, useEffect } from 'react'
import style from './Personal.module.css'
import ChangeInfo from './PersonalComponent/ChangeInfo'
import ChangePassword from './PersonalComponent/ChangePassword'
export default function Personal() {
    let [flag, changeFlag] = useState(true)
    let [info, changeInfo] = useState("current")
    let [password, changePassword] = useState(null)
    let [data, changeData] = useState()
    let [avatar, changeAvatar] = useState('/public/img/defaultAvatar/avatar.png')
    let [username, changeUsername] = useState('')
    useEffect(() => {
        async function fetchData() {
            let res = await axios.get(`/personal`)
            if (res.data.code == 201) {
                changeData(res.data.res_personal[0])
                let userInfo = res.data.res_personal[0]
                if (userInfo.avatar != "") {
                    changeAvatar(userInfo.avatar)
                }
                changeUsername(userInfo.username)
            } else {
                console.log(res.data.info);
            }
        }
        fetchData()
    },data)
    return (
        <div>
            <div className={style.container}>
                <div className={style.bigBox}>
                    <div className={style.leftBox}>
                        <div className={style.avatarBox}>
                            <div className={style.avatar}>
                                <img src={avatar} alt="" />
                            </div>
                            <div className={style.username}>
                                <p>
                                    <span>{username}</span>
                                </p>
                            </div>
                        </div>
                        <div className={style.changeData}>
                            <table>
                                <thead>
                                    <tr>
                                        <th className={style.changeHeader}>{username}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td className={style[info]} onClick={() => { changeFlag(true); changeInfo("current"); changePassword(null) }}>个人信息修改</td>
                                    </tr>
                                    <tr>
                                        <td className={style[password]} onClick={() => { changeFlag(false); changeInfo(null); changePassword("current") }}>修改(重新设置)个人密码</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div className={style.rightBox}>
                        {
                            flag ? <ChangeInfo userInfo={data}></ChangeInfo> : <ChangePassword userInfo={data}></ChangePassword>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
